<template>
    <div>
        <div class="main" ref="main"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts"

    export default {
        name: "BarView",
        data(){
            return {
                myChart :null,
                baseOption :{
                    title :{
                        text : "基础柱状图",
                        left : "center",
                        top : 10
                    },
                    xAxis :{
                        name: "Weekday",
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis :{
                        name : "Number"
                    },
                    series : [
                        {
                            type : "bar",
                            data: [23, 24, 18, 25, 27, 28, 25],
                            barWidth : "20%",
                            barGap: '10%',  // 同一个类目下相邻的两个柱子间距
                            barCategoryGap: '40%', // 类目与类目之间的间距
                            // 设置这系列所有柱子的颜色
                            itemStyle :{
                                color : "#ff6700",  // 条形图柱的颜色
                                barBorderRadius: 5,  // 边框圆角
                                borderWidth: 1,  // 边框的线宽
                                borderType: 'dashed',  // 边框的样式（solid dashed double）
                                borderColor: '#73c0de',  // 边框的颜色
                                opacity : 0.7,
                                shadowBlur: 3,
                                shadowColor: '#91cc75',
                            },
                            showBackground: true,  // ECharts 4.7.0 版本后才能使用
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        },
                        // 多系列只需在series中添加数据和图类型即可
                        {
                            type : "bar",
                            data: [26, 24, 18, 22, 23, 20, {
                                value: 35,
                                // 设置单个柱子的样式
                                itemStyle: {
                                    color: '#91cc75',
                                    shadowColor: '#91cc75',
                                    borderType: 'dashed',
                                    opacity: 0.5
                                }
                            }]
                        },

                    ]
                }
            }
        },
        mounted(){
            // this.myChart = echarts.init(this.$refs.main,'dark');
            this.myChart = echarts.init(this.$refs.main);
            this.myChart.setOption(this.baseOption)
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>